<!-- subpkg_consult/room/components/patient-info.vue -->
<script lang="ts" setup>
import type { ConsultRecord } from '@/types/room'

// 定义属性接收外部传入的数据
const props = defineProps<{ info: ConsultRecord }>()

// 患病时长--数组写法，需要结合 find 来检索较为不变
// 策略模式--映射,TS中可以用数字作为属性名
const illnessTimes = {
  1: '一周内',
  2: '一个月内',
  3: '半年内',
  4: '半年以上',
}
// [
//   {
//     type: 1,
//     value: '一周内',
//   },
//   {
//     type: 2,
//     value: '一个月内',
//   },
//   {
//     type: 3,
//     value: '半年内',
//   },
//   {
//     type: 4,
//     value: '半年以上',
//   },
// ]
// 是否就诊过
const consultFlags = { 1: '就诊过哦', 0: '没有就诊过咦~~' }
// [
//   {
//     type: 1,
//     value: '就诊过',
//   },
//   {
//     type: 0,
//     value: '没有就诊过',
//   },
// ]

const previewImgs = () => {
  uni.previewImage({
    // 基于 对象数组，转为字符串数组（map 映射）
    urls: props.info.pictures.map(v => v.url),
  })
}
</script>
<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <!-- {{ info }} -->
    <view class="header">
      <view class="title">{{ props.info.patientInfo?.name }} {{ props.info.patientInfo?.genderValue }} {{ props.info.patientInfo?.age }}岁</view>
      <view class="note">{{ illnessTimes[props.info.illnessTime!] }} | {{ consultFlags[props.info.consultFlag!] }}</view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ props.info.illnessDesc }}</text>
      </view>
      <view class="list-item">
        <text class="label">图片</text>
        <text v-if="props.info.pictures.length > 0" @click="previewImgs" class="note">点击查看</text>
        <text v-else class="note"> 暂无图片</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.patient-info {
  padding: 30rpx;
  margin-top: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;

  .header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;

    .title {
      font-size: 32rpx;
      color: #121826;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: 26rpx;
      color: #848484;
    }
  }

  .content {
    margin-top: 20rpx;
    font-size: 26rpx;

    .list-item {
      display: flex;
      margin-top: 10rpx;
    }

    .label {
      width: 130rpx;
      color: #3c3e42;
    }

    .note {
      flex: 1;
      line-height: 1.4;
      color: #848484;
    }
  }
}
</style>
